<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title>紫金艺境</title>

<link rel="stylesheet/less" href="__PUBLIC__/css/style.less" />

<script src="__PUBLIC__/js/less-1.5.0.min.js"></script>
<script src="__PUBLIC__/js/jquery-1.11.0.min.js"></script>

</head>
<body>
<div class="stages">
  <div id="stage-0" class="stage-item" style="display:none">
    <img src="__PUBLIC__/images/stage-0.png" alt="">
    <div class="stage-title" id="stage-title-0" style="display:none">
      <img src="__PUBLIC__/images/stage-title-0.png" alt="">
    </div>
  </div>

  <div id="stage-1" class="stage-item"  style="display:none">
    <img src="__PUBLIC__/images/stage-1.png" alt="">
    <div class="stage-title" id="stage-title-1" style="display:none">
      <img src="__PUBLIC__/images/stage-title-1.png" alt="">
    </div>
  </div>

  <div id="stage-2" class="stage-item"  style="display:none">
    <img src="__PUBLIC__/images/stage-2.png" alt="">
    <div class="stage-title" id="stage-title-2" style="display:none">
      <img src="__PUBLIC__/images/stage-title-2.png" alt="">
    </div>
  </div>
</div>


<script type="text/javascript">
// $(function(){
//   setTimeout(function(){
//     $('#stage-0').fadeIn(2000,function(){//场景1背景显示
//       $('#stage-title-0').fadeIn(2000,function(){//场景1标题显示
//         $("#stage-title-0").animate({top:"-240px"},1000,function(){//场景1标题移出场景
//           $("#stage-title-0").hide();//场景1标题隐藏
//           $('#stage-0').fadeOut(2000,function(){//场景1背景小时
//             $('#stage-1').fadeIn(2000,function(){//场景2背景显示
//               $('#stage-title-1').fadeIn(2000,function(){
//                 $('#stage-title-1').animate({top:"-240px"},1000,function(){
//                   $('#stage-title-1').hide();
//                   $('#stage-1').fadeOut(2000,function(){
//                     $('#stage-2').fadeIn(2000,function(){
//                       $('#stage-title-2').fadeIn(2000,function(){
//                         $('#stage-title-2').animate({top:"-240px"},1000,function(){
//                           window.location.href="index.html"
//                         })
//                       })
//                     })
//                   })
//                 })
//               })
//             })
//           })
//         });
//       })
//     })
//   },1500)
// })

$(function(){
  playCG(0)
})

function playCG(index){
  if(index > 2){
	  //动画结束
    window.location.href="__MODULE__/Index/menu"
  }else{

    var stage = "#stage-" + index;
    var stageTitle = "#stage-title-" + index;
    var fadeTime =  2000 //背景层过渡时间
    var removeTime = 1000; //标题块移动时间
    var timeout =  fadeTime * 3 + removeTime;//下一次动画延时数

    //每一次动画过程
    $(stage).fadeIn(fadeTime,function(){
      $(stageTitle).fadeIn(fadeTime,function(){
        $(stageTitle).animate({top:"-240px"},removeTime,function(){
          $(stageTitle).hide()
          $(stage).fadeOut(fadeTime);
        })
      })
    })
    
    //进入下一次动画
    index++
    if(index > 0 ){
      setTimeout(function(){
        return playCG(index)
      },timeout)
    }
  }
}
</script>

</body>
</html>